<%-- 
    Document   : playGame
    Created on : 14/07/2011, 20:34:06
    Author     : Assaf
--%>

<%@page import="Square.Square"%>
<%@page import="Monopol.AssetGroups.AssetGroup" %>
<%@page language="java" session="true" contentType="text/html;charset=UTF-8" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html>
    <head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title>Java Web Monopoly Game</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="apple-touch-icon" href="/img/apple-touch-icon.png">
	<link href="img/favicon.ico" rel="shortcut icon" />
	<link rel="stylesheet" href="css/same-style-all-browsers.css">
	<link rel="stylesheet" href="css/monopoly.css?1511">
	<link rel="stylesheet" href="css/playerpanel.css?1511">
	<script language="JavaScript" type="text/javascript" src="js/libs/jquery-1.6.2.min.js"></script>
	<script language="JavaScript" type="text/javascript" src='js/monopoly.js?1550'></script>
	<!--[if lt IE 7 ]><script src="js/libs/dd_belatedpng.js"></script>
	  <script>DD_belatedPNG.fix("img, .png_bg");</script><![endif]-->
    </head>

    <body>

	<div id="container">
	    <!--Container -->
	    <div id="main">
		<!-- Main Frame -->
		<input id="currPlayerName" type="hidden" value="<%= (String) request.getAttribute("playerName")%>" />
		<input id="lastNotification" type="hidden" value="0" />
		<div id="monopoly-frame"  class="boardpanel">
		    <!-- Game Board Panel -->
		    <%
				Square[] gameSquares = (Square[]) request.getAttribute("squares");
				String cellClass = "";
				if (gameSquares != null) {
				    for (int i = 1; i <= gameSquares.length; i++) {
					if (i > 0 && i < 10) {
					    if (i == 1) {
						cellClass = "cell northwest";
					    } else {
						cellClass = "cell north";
					    }
					} else if (i > 9 && i < 19) {
					    if (i == 10) {
						cellClass = "northeast";
					    } else {
						cellClass = "east";
					    }
					} else if (i > 18 && i < 28) {
					    if (i == 19) {
						cellClass = "southeast";
					    } else {
						cellClass = "south";
					    }
					} else if (i > 27) {
					    if (i == 28) {
						cellClass = "southwest";
					    } else {
						cellClass = "west";
					    }
					}
					String stateName;
					String squareName = "";
					Double squareCost;

					try {
					    squareName = gameSquares[i - 1].getName();
					    squareCost = gameSquares[i - 1].getCost();
					} catch (Exception ex) {
					    squareCost = null;
					}
					try {
					    stateName = gameSquares[i - 1].getGroup().getName();
					} catch (Exception e) {
					    if (squareName == "Start") {
						stateName = "square-start";
						squareName = "";
					    } else if (squareName == "Parking") {
						stateName = "square-parking";
						squareName = "";
					    } else if (squareName == "Prison") {
						stateName = "square-prison";
						squareName = "";
					    } else if (squareName == "Go to Prison") {
						stateName = "square-gotoprison";
						squareName = "";
					    } else if (squareName == "Warning") {
						stateName = "square-warning";
						squareName = "";
					    } else if (squareName == "Surprise") {
						stateName = "square-surprise";
						squareName = "";
					    } else {
						stateName = null;
					    }
					}
					// Check the Servicee and Transportaions Tags
					if (stateName == "All Transportations") {
					    stateName = "All_Transportations";
					} else if (stateName == "All Services") {
					    stateName = "All_Services";
					}

					if (stateName != null) {
					    cellClass = cellClass + " " + stateName;
					}
		    %>
		    <div class="cell <%=cellClass%> level0" id="cell<%=i%>">
			<div class="level1">
			    <div class="square-name"><%=squareName%></div>
			    <%
								    if (squareCost != null) {
			    %>
			    <BR>
			    <div class="square-cost"><%=squareCost%></div>
			    <%
								    }
			    %>
			    <div class="level2">
				<div class="level3"></div>
			    </div>
			</div>
		    </div>
		    <%
							}
						    } else {
		    %>
		    <h1 class="error">No Squares!!!!</h1>
		    <%							    }
		    %>

		    <!-- END of Game Board Panel -->
		</div>

		<div class="playerpanel">
		    <!-- Player panel -->
		    <h2 class="playertitle" id="playerName">Player's Name</h2>
                    <div id="playerColor"></div>
		    <span class="dotted-border">

			<h3 class="playerminititle">Assets</h3>
			<ul id="playerAsset" class="players-list" >

			</ul>
		    </span>
		    <span class="dotted-border">

			<H3 class="playerminititle">Special Cards</H3>
			<ul id="playerCards" class="players-list">
			    
			</ul>
		    </span>
		    <span class="dotted-border">

			<span class="players-cash" id="playerCash">$0</span>
			<span class="players-cash-text" id="playerCashText"> in {{Player}} bank</span>

		    </span>

		    <!-- END of Player panel -->
		</div>

		<div>
		    <!-- Players List -->
		    <ul class="player-icons-list" id="playersList">
		    </ul>
		    <!-- END of Players List -->
		</div>
		<div class="bank-cash">
		    <img src="img/pig.png">
		    <span id="bank-cash-txt" class="bank-cash-txt"></span>
		</div>
		<!-- END of Main Frame -->
	    </div>
	    <!-- END ofContainer -->
	</div>

	<script type="text/javascript">
	    $(document).ready(function() {
		if (typeof GAME == "undefined") {
		    updateState();
		}
	    }
	</script>

    </body>
</html>
